<template>
  <view class="box">
    <!-- 卖方username -->
    <view class="top_name flex">
      <image src="/static/mf/shop/c2c_avatar.png" mode="" />
      <view class="top_name_text">{{
        detail.user && detail.user.username
      }}</view>
    </view>
    <!-- 算力，卖出金额 -->
    <view class="center_info flex">
      <view class="flex1 power">
        {{ $t("mf.c2c.power") }}{{ detail.power_total }} T
      </view>
      <view class="amount">
        {{ $t("mf.c2c.price")
        }}{{ detail.goods_info && detail.goods_info.pay_symbol }}：<text
          style="color: #ff6565; font-size: 32rpx"
          >{{ detail.sell_price }}</text
        >
      </view>
    </view>
    <!-- 剩余挖矿天数 -->
    <view class="bottom_box flex">
      <view class="surplus_day flex1">
        {{
          $t("mf.c2c.surplus_day", {
            day: detail.cycle_day - detail.shifang_day,
          })
        }}
      </view>
      <button class="buy_btn" @tap.stop="buy(detail.id)">
        {{ $t("mf.c2c.buy") }}
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    buy(id) {
      this.$emit("buy", id);
    },
  },
};
</script>

<style scoped>
.box {
  width: 710rpx;
  height: 320rpx;
  background: #121624;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.top_name {
  align-items: center;
  margin-bottom: 40rpx;
}
.top_name image {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}
.top_name_text {
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.power {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 40rpx;
}
.amount {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 40rpx;
}
.center_info {
  margin-bottom: 40rpx;
}
.bottom_box {
  align-items: center;
}
.surplus_day {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 40rpx;
}
.buy_btn {
  width: 206rpx;
  height: 72rpx;
  background: #646bff;
  border-radius: 10rpx;
  line-height: 72rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
</style>